// 默认偏移数量
let limit = 80;
// 偏移初始量
let offset = 10;
// 开始的页码
let pageid = 0;
// 声明一个lock
let lock;
// 声明搜索参数
let type = -1;
let area = -1;
let initial = 'a';

function songerlist() {
    Ajax({
        url: 'http://localhost:3000/artist/list',
        params: {
            offset: 0,
            limit: 10,
            type: type,
            area: area,
            initial: initial,
        },
        type: 'get',
    }).then(function resolve(res) {
        console.log(res);
        const result = Array.from(res.artists);
        // 需要处理
        const taglis = Array.from(document.querySelectorAll('.taglis'));
        const tagLists = Array.from(document.querySelectorAll('.tagList'));

        const tagItems = Array.from(document.querySelectorAll('.tagItems'));
        const tagItem = document.querySelector('.tg');
        let tpl = template('tpl', {
            data: result,
        })
        const singersList = document.querySelector('.singer_list__list');
        singersList.innerHTML = tpl;
        const singersCover = document.querySelectorAll('.singer_list__cover');
        singersCover.forEach(function (item, index) {
            item.addEventListener('click', function () {
                console.log(this);
                this.href = this.href + '?' + this.dataset.id;
            })
        })

        // console.log(tagItems,tagLists,taglis)
        tagItem.addEventListener('click', function (evt) {
            initial = evt.target.innerHTML;
            tagItems.forEach(function (item, index) {
                item.classList.remove('btnColor');
            })
            evt.target.classList.add('btnColor');
            songerlist();
        })
        // 需要处理
        taglis.forEach(function (item, index) {
            item.addEventListener('click', function (evt) {
                taglis.forEach(function (item, index) {
                    item.classList.remove('btnColor');
                })
                area = evt.target.dataset.id;
                evt.target.classList.add('btnColor');
                songerlist();
            })
        })
        tagLists.forEach(function (item, index) {
            item.addEventListener('click', function (evt) {
                type = evt.target.dataset.id;
                tagLists.forEach(function (item, index) {
                    item.classList.remove('btnColor');
                })
                evt.target.classList.add('btnColor');
                songerlist();
            })
        })
    })
}
songerlist();
let str = '';
function songers() {
    lock = true;
    Ajax({
        url: 'http://localhost:3000/top/artists',
        params: {
            limit: limit,
            offset: limit * pageid,
        },
        type: 'get',
    }).then(function resolve(res) {
        if (res.artists.length == 0) {
            console.log('数据已经取完了！');
            lock = true;
            return;
        }
        // console.log(res);
        const result = Array.from(res.artists);
        const singersText = document.querySelector('.singer_list_txt');
        // console.log(result)
        result.forEach(function (item, index) {
            str += `<li class="singer_list_txt__item"><a class="singer_list_txt__link" data-id="${ item.id }" href="./singersDetail.html">${ item.name }</a></li>`;
        })
        singersText.innerHTML = str;
        singersText.addEventListener('click', function (evt) {
            // console.log(evt.target);
            evt.target.href = evt.target.href + '?' + evt.target.dataset.id;
        })

        singersText.innerHTML = str;
        function show() {
            const footer = document.querySelector('footer');
            const html = document.documentElement;
            if (footer.offsetTop <= html.clientHeight + html.scrollTop && !lock) {
                setTimeout(function () {
                    songers(++pageid);
                }, 400)
            }
        }
        show();

        window.addEventListener('scroll', show);
        lock = false;
    })
}
songers();
